<template>
	<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

		<el-tab-pane label="主题" name="first">
			<div v-for="fit in fits" :key="fit">
				<el-row>

					<el-col :span="12" class="container">
						<img src="../../../assets/123.png" /><br />
						<router-link :to="{ path: '/pagesIndex/Gedan',query:{fit:fit}}">{{fit}}</router-link>
					</el-col>
				</el-row>
			</div>
		</el-tab-pane>



		<el-tab-pane label="帖子" name="second">
			<el-table :data="mymusic" style="width:865px;margin-left: 110px;">
				<el-table-column prop="date" width="400" #default="scope">
					<div>
						<el-button type="text">
							<!--   头像 -->

							<div class="demo-type" style="margin-top: 20px;">
								<el-button type="text" @click="yonghu(scope.row)">
									<el-avatar :size="30" src="https://empty" @error="errorHandler">
										<img :src="scope.row.user_img">
									</el-avatar>
								</el-button>
							</div>
						</el-button>

						<div style="margin-top:-30px;margin-left:35px; height: 5px;">
							<el-button type="text"
								@click="gequ(scope.row)">{{scope.row.music_author}}—{{scope.row.music_name}}
							</el-button>
						</div>

						<div style="margin-top:20px;margin-left:35px;">
							<span>{{scope.row.music_user_name}}</span>
						</div>

					</div>
				</el-table-column>

				<!--  表格右边的浏览量 -->
				<el-table-column prop="name" width="400" #default="scope">
					<div style="color:aliceblue;
				        margin-top:14px;margin-left:300px;height:20px;width:40px
				        text-align: center;
						color: #88B9F9;
						">
						<svg style="margin-left: -80px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
							fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
							<path
								d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
						</svg>
						{{scope.row.music_tu}}
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
							class="bi bi-star" viewBox="0 0 16 16">
							<path
								d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" />
						</svg>
						{{scope.row.music_sc}}
					</div>
				</el-table-column>
			</el-table>



			<!-- 分页 -->
			<div style="margin-left: 110px;background-color: white;width:865px ;height: 40px;">
				<el-pagination style="margin-left: 300px;" v-model:current-page="page.pageNum"
					v-model:page-size="page.pageSize" layout="total, prev, pager, next, jumper" :total="page.total"
					@click="doListtz()" />
			</div>
		</el-tab-pane>





		<el-tab-pane label="收藏" name="third">
			<el-table :data="scmusic" style="width:865px;margin-left: 110px;">
				<el-table-column prop="date" width="400" #default="scope">
					<div>
						<el-button type="text">
							<!--   头像 -->

							<div class="demo-type" style="margin-top: 20px;">
								<el-button type="text" @click="yonghu(scope.row)">
									<el-avatar :size="30" src="https://empty" @error="errorHandler">
										<img :src="scope.row.user_img">
									</el-avatar>
								</el-button>
							</div>
						</el-button>

						<div style="margin-top:-30px;margin-left:35px; height: 5px;">
							<el-button type="text"
								@click="gequ(scope.row)">{{scope.row.music_author}}—{{scope.row.music_name}}
							</el-button>
						</div>

						<div style="margin-top:20px;margin-left:35px;">
							<span>{{scope.row.music_user_name}}</span>
						</div>

						<div style="margin-top: -30px;margin-left: 250px;">
							<el-button type="text" @click="doAdd(scope.row)"><el-icon :size="20">
									<CirclePlusFilled />
								</el-icon></el-button>
							<el-button type="text" @click="doDelete(scope.row)"><el-icon :size="20">
									<DeleteFilled />
								</el-icon></el-button>
						</div>
					</div>
				</el-table-column>

				<!--  表格右边的浏览量 -->
				<el-table-column prop="name" width="400" #default="scope">
					<div style="color:aliceblue;
				        margin-top:14px;margin-left:300px;height:20px;width:40px
				        text-align: center;
						color: #88B9F9;
						">
						<svg style="margin-left: -80px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
							fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
							<path
								d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
						</svg>
						{{scope.row.music_tu}}
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
							class="bi bi-star" viewBox="0 0 16 16">
							<path
								d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" />
						</svg>
						{{scope.row.music_sc}}
					</div>
				</el-table-column>

			</el-table>



			<!-- 分页 -->
			<div style="margin-left: 110px;background-color: white;width:865px ;height: 40px;">
				<el-pagination style="margin-left: 300px;" v-model:current-page="page.pageNum"
					v-model:page-size="page.pageSize" layout="total, prev, pager, next, jumper" :total="page.total"
					@click="doListsc()" />
			</div>





		</el-tab-pane>

		<el-tab-pane label="已购" name="fourth">
			<el-table :data="music" style="width:865px;margin-left: 110px;">
				<el-table-column prop="date" width="400" #default="scope">
					<div>
						<el-button type="text">
							<!--   头像 -->

							<div class="demo-type" style="margin-top: 20px;">
								<el-button type="text">
									<el-avatar :size="30" src="https://empty">
										<img :src="scope.row.user_tx">
									</el-avatar>
								</el-button>
							</div>
						</el-button>

						<div style="margin-top:-30px;margin-left:35px; height: 5px;">
							<el-button type="text">{{scope.row.music_author}}—{{scope.row.music_name}} </el-button>
						</div>
						<div style="margin-top:20px;margin-left:35px;">
							{{scope.row.music_user_name}}
						</div>
					</div>
				</el-table-column>

				<!--  表格右边的浏览量 -->
				<el-table-column prop="name" width="400" #default="scope">
					<div style="color:aliceblue;
				        margin-top:14px;margin-left:300px;height:20px;width:40px
				        text-align: center;
						color: #88B9F9;
						">
						<svg style="margin-left: -30px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
							fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
							<path
								d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
						</svg>
						{{scope.row.music_tu}}
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
							class="bi bi-star" viewBox="0 0 16 16">
							<path
								d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" />
						</svg>
						{{scope.row.music_sc}}
					</div>
				</el-table-column>


			</el-table>



			<!-- 分页 -->
			<div style="margin-left: 110px;background-color: white;width:865px ;height: 40px;">
				<el-pagination style="margin-left: 300px;" v-model:current-page="page.pageNum"
					v-model:page-size="page.pageSize" layout="total, prev, pager, next, jumper" :total="page.total"
					@click="doListgm()" />
			</div>









		</el-tab-pane>

	</el-tabs>
</template>
<script setup lang="ts">
	import type { TabsPaneContext } from 'element-plus'
	import { Search } from '@element-plus/icons-vue'
	import { UserFilled } from '@element-plus/icons-vue'
	import axios from 'axios';
	import { nextTick, onMounted, ref } from 'vue';
	import { ElMessage } from 'element-plus';
	import type { ImageProps } from 'element-plus'

	//主题
	// const fits = [

	// ]


	const activeName = ref('first')

	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}


	//表格数据

	// 分页条件
	const page = ref({
		//第几页
		pageNum: 1,
		//一共多少页
		pages: 0,
		//一共多少条
		total: 0,
		//一页多少行
		pageSize: 10
	});


	const user = ref({});


	//叼马
	const fits = ref([]);

	function yonghu(m) {
		location.href = "/pagesIndex/yongHu?user_id=" + m.music_user_id;
	};

	function gequ(t) {
		location.href = "/pagesIndex/play?music_id=" + t.music_id;
	}



	//表单
	const mymusic = ref([]);

	const scmusic = ref([]);

	const music = ref([]);



	//删除收藏
	const doDelete = (music) => {
		axios({
			url: "/api/music/deletesc",
			method: 'delete',
			params: music,
		}).then(response => {
			if (response.data === true) {
				// 删除成功，查询刷新表格数据
				ElMessage.success('删除成功');
				doListsc();
			} else {
				ElMessage.error('删除失败');
			}
		});
	}

	//加入歌单
	const doAdd = (music) => {
		axios({
			url: "/api/music/myAdd",
			method: 'post',
			data: music,
		}).then(response => {
			if (response.data === true) {
				// 删除成功，查询刷新表格数据
				ElMessage.success('添加成功');
				doListsc();
			} else {
				ElMessage.error('添加失败');
			}
		}).catch(error => {
			// 处理请求错误
			ElMessage.error('请求失败: ' + (error.response ? error.response.data.message : error.message));
		});;
	}

	//查询
	const doListsc = () => {
		const user = JSON.parse(localStorage.getItem("user"));
		axios({
			url: '/api/music/mylist',
			method: 'GET',
			params: Object.assign({}, user, { pageNum: page.value.pageNum, pageSize: page.value.pageSize })
		}).then(response => {
			// console.log(response.data)

			scmusic.value = response.data.list;
			scmusic.value.forEach(item => {
				item.user_img = "/api/src/images/" + item.user_img;
			});
			console.log(scmusic.value);
			// 分页信息
			page.value.pages = response.data.pages;
			page.value.total = response.data.total;
		});
	};



	const doListtz = () => {
		const user = JSON.parse(localStorage.getItem("user"));
		axios({
			url: '/api/music/mymusic',
			method: 'GET',
			params: Object.assign({}, user, { pageNum: page.value.pageNum, pageSize: page.value.pageSize })
		}).then(response => {
			// console.log(response.data)

			mymusic.value = response.data.list;
			mymusic.value.forEach(item => {
				item.user_img = "/api/src/images/" + item.user_img;
			});
			console.log(mymusic.value);
			// 分页信息
			page.value.pages = response.data.pages;
			page.value.total = response.data.total;
		});
	};



	const doListgm = () => {
		const user = JSON.parse(localStorage.getItem("user"));
		axios({
			url: '/api/user/list1',
			method: 'GET',
			params: Object.assign({}, user, { pageNum: page.value.pageNum, pageSize: page.value.pageSize })
		}).then(response => {
			// console.log(response.data)

			music.value = response.data.list;
			console.log(music.value);
			// 分页信息
			page.value.pages = response.data.pages;
			page.value.total = response.data.total;
		});
	};

	//主题
	const mlist = () => {
		const user = JSON.parse(localStorage.getItem("user"));
		axios({
			url: '/api/music/gedanlist',
			method: 'GET',
			params: user,
		}).then(response => {
			// console.log("***************************************************************")
			// console.log(response.data)

			fits.value = response.data;
			console.log("***************************************************************");
			console.log(fits.value);

			// 分页信息
			// page.value.pages = response.data.pages;
			// page.value.total = response.data.total; 
		}).then(() => {
			// 使用nextTick确保fits已经更新
			nextTick(() => {
				console.log("fits has been updated:", fits.value);
			});
		});
	}




	onMounted(() => {

		doListsc();
		doListtz();
		doListgm();
		mlist();
	});
</script>

<style>
	.demo-tabs>.el-tabs__content {
		padding: 115px;
		color: #6b778c;
		font-size: 32px;
		align-items: center;
		/* 垂直居中对齐所有子元素 */
		font-weight: 600;
	}

	.container {
		display: flex;
		flex-direction: row;
	}

	.container img {
		flex-grow: 1;
		margin: 15px;

		width: auto;
		/* 保持图片原始宽度 */
		height: auto;
		/* 保持图片原始高度 */
		max-width: 10%;
		/* 限制图片最大宽度为容器宽度 */
		/* max-height: 30%; */
		/* 限制图片最大高度为容器高度 */
	}

	/* 添加一些样式以美化链接 */
	.container a {
		text-decoration: none;
		/* 去除下划线 */
		color: inherit;
		/* 继承父元素的文字颜色 */
		font-size: 16px;
		/* 设置字体大小 */
		line-height: normal;
		/* 设置行高为正常，以避免额外的垂直空间 */
		align-self: center;
		/* 确保链接在垂直方向上对齐 */
	}
</style>